<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <navbar />
    <div class="main-containers" :body-style="{ 'height': '100%'}">
      <div class="box-card">
        <div :class="{ 'fixed-header': fixedHeader, 'sidebar-box-min': !sidebar.opened}" class="sidebar-box-max">
          <transition name="fade" mode="out-in">
            <sidebar :class="['sidebar-container', sidebar.opened ? 'sidebarss' : '']" v-if="sidebar.opened" />
            <div class="open" @click="toggleSideBar" v-else>
              <i class="el-icon-arrow-right"></i>
            </div>
          </transition>
        </div>
        <app-main :style="!sidebar.opened ? 'margin-left: 28px' : 0" />
      </div>
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar } from '../../layout/components'
import AppMain from './AppMain.vue'
import ResizeMixin from '../../layout/mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  // height: calc(100% - 80px);
  width: 100%;
  height: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
.bannerImg {
  width: 100%;
  img {
    width: 100%;
    display: block;
  }
}
.open {
  width: 24px;
  height: 240px;
  margin-right: 24px;
  background-color: #EEF1FF;
  color: #AAC4FF;
  position: fixed;
  font-size: 20px;
  font-weight: bold;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 21px 21px 0;
  transition: all .3s ease-out; /* 添加滑动动画 */
  will-change: all;
  cursor: pointer
}
.sidebar-container {
  transition: all .3s ease-out; /* 添加滑动动画 */
  will-change: all;
  width: 0;
  top: 40% !important;
}
.sidebarss{
  min-width: 150px !important;
  padding: 30px !important;
    :deep(.el-scrollbar) {
      min-width: 1px;
    }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}
.main-containers {

  .box-card {
    min-height: 800px;
    display: flex;
    height: 100%;
  }
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px)
}

.mobile .fixed-header {
  width: 100%;
}
.sidebar-box-max{
  transition: all .3s ease-out; /* 添加滑动动画 */
  width: 150px;
}
.sidebar-box-min{
  width: 10px;
}
</style>
